<script>
import { searchDB, searchTableDB } from '@/option'
import fileshow from './fileshow.vue'
import store from '@/store'
export default {
  name: 'CardList',
  data () {
    return {
      list: '', // 主页中的数据
      drawerList: '', // 侧边栏中的数据
      drawer: false,
      direction: 'rtl' // 控制侧边栏方向
    }
  },
  components: {
    fileshow
  },
  mounted () {
    // 渲染主页数据
    searchDB('FT').then(res => {
      this.list = res
    })
  },
  methods: {
    editAndShow (id, e) {
      if (e.target.tagName === 'DIV') {
        this.drawer = true
        // 根据id 获取对应的数据信息
        searchTableDB(id, 'FT').then(async res => {
          this.drawerList = res
          // 传送数据
          store.state.drawerList = await this.drawerList
        })
      } else {
        console.log('编辑')
      }
    },

    addInfo () {}
  }
}
</script>

<template>
  <div class="box">
    <el-card class="box-card" v-for="item in list" :key="item.favoriteId">
      <div
        class="clearfix"
        @click="editAndShow(item.favoriteId, $event)"
      >
        <div class="contentArea">
          {{ item.name_f }}
        </div>
      </div>
    </el-card>
    <!-- 添加文件夹或文件 -->
    <el-card class="box-card">
      <div class="clearfix" @click="addInfo">
        <input type="text" placeholder="双击输入" />
      </div>
    </el-card>
    <!-- 侧边栏内容 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      size="45%"
      :direction="direction"
    >
      <div class="sidebarArea">
        <span class="showTitle">{{ drawerList.name_f }}</span>
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          style="position: relative; top: -5px; left: 544px"
        ></el-button>
        <!-- 横线内容区域 -->
        <el-divider content-position="left">{{
          drawerList.description_f
        }}</el-divider>
        <fileshow></fileshow>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="less" scoped>
.box {
  width: 832px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  position: absolute;
  top: 300px;
  left: 350px;
  /* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 为 IE、Edge 和 Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
  overflow-y: hidden;
  .box-card {
    margin: 10px;
    transition: all 0.7s;
    &:hover {
      box-shadow: 2px 1px 5px rgba(227, 204, 252, 0.5);
      transform: translate3d(0, -5px, 0);
    }
    &:nth-child(5n) {
      margin-right: 0px;
    }
  }
}
@font-face {
  font-family: 'contentFont';
  src: url('../../assets/fonts/香蕉.ttf');
}
.item {
  margin-bottom: 18px;
}
.clearfix {
  padding: 10px 5px;
  .contentArea {
    font-family: 'contentFont';
    font-size: 22px;
    letter-spacing: 2px;
    float: left;
    padding: 5px 5px 5px 10px;
    max-width: 100px;
    overflow: hidden;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.optionBtn {
  float: right;
  padding: 3px 0;
  font-size: 14px;
  color: rgb(227, 204, 252);
}
.box-card {
  width: 144px;
  height: 81px;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background-color: rgba(227, 204, 252, 0.5);
  border-radius: 10px;
}
.sidebarArea {
  padding: 10px;
  .showTitle {
    font-size: 24px;
    padding: 8px 15px;
  }
}
</style>
